<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap{
            margin: 20px;
        }
        .buttons{
            margin-bottom: 10px;
        }
        .slide{
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            background-color: pink;
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- .wrap>(.buttons>button*3)+.slide>.ball -->
    <div class="wrap">
        <div class="buttons">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slide">
            <div class="ball">1</div>
        </div>
    </div>
</body>
<script>
    // 需求: 点击三个按钮 分别控制ball 移动 暂停 返回

    // JS运动: 通过JS中DOM操作,每隔一段时间调整元素的位置  
    //       本质上: 通过计时器随时间调整元素的位置(定位 平移)

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var timer = null;

    // 正向运动  => 终点值 大于 起点值  
    start.onclick = function(){

        animate(ball,"left",1000);
        // animate(ball,"top",500);
        // animate(ball,"width",1000);

    }

    pause.onclick = function(){
        clearInterval(timer);
    }

    // 反向运动  终点值(0) < 起点值(1000)
    back.onclick = function(){
        animate(ball,"left",0);
        // animate(ball,"top",0);
        // animate(ball,"width",0);
    }

    // function animate(ele,end){   // 只能控制top
    //     var cur = ele.offsetTop; //  1. 记录运动的起始位置   2. 记录每隔10ms之后的位置  1000
    //     // var end = 1000;  // 终点值
    //     var speed = end >= cur ? 10 : -10;

    //     clearInterval(timer);
    //     timer = setInterval(function(){
    //         cur += speed;  // 记录每隔10ms之后的位置  
    //         ele.style.top = cur + "px"; 
    //         // circle += 60;
    //         // ele.style.transform = `rotate(${circle}deg)`;

    //         // 每次运动完毕 判断是否到达临界值  => 停止
    //         // 理想情况下  cur === end
    //         // 但是如果 运动的距离 % speed 不为 0  => 超出临界值
    //         // 解决方法 设置误差允许范围
    //         // cur  如果再此范围之间 [end-speed,end+speed] 再跑一次肯定会超 => 直接清除计时器 强制到达终点  

    //         // cur >= end
    //         if(Math.abs(cur - end) <= Math.abs(speed)){  //在跑一次就超了  
    //             clearInterval(timer);
    //             ele.style.top = end + "px";
    //         }

    //     },5);
    // }


    function animate(ele,attr,end){   //  attr 运动的css属性名 left top width height
        // debugger;
        var cur = parseFloat(getStyle(ele,attr)); //  1. 记录运动的起始位置   2. 记录每隔10ms之后的位置  1000
        // var end = 1000;  // 终点值
        var speed = end >= cur ? 10 : -10;

        clearInterval(timer);
        timer = setInterval(function(){
            cur += speed;  // 记录每隔10ms之后的位置  
            ele.style[attr] = cur + "px"; 
            // circle += 60;
            // ele.style.transform = `rotate(${circle}deg)`;

            // 每次运动完毕 判断是否到达临界值  => 停止
            // 理想情况下  cur === end
            // 但是如果 运动的距离 % speed 不为 0  => 超出临界值
            // 解决方法 设置误差允许范围
            // cur  如果再此范围之间 [end-speed,end+speed] 再跑一次肯定会超 => 直接清除计时器 强制到达终点  

            // cur >= end
            if(Math.abs(cur - end) <= Math.abs(speed)){  //在跑一次就超了  
                clearInterval(timer);
                ele.style[attr]  = end + "px";
            }

        },5);
    }

    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }
</script>
</html>